<template>
  <div class="pb-page">
    <el-pagination v-model:current-page="internalCurrentPage" v-model:page-size="internalPageSize"
      :hide-on-single-page="isHide" :page-sizes="pageSizes" :size="size" :disabled="disabled" :background="background"
      layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" @change="onChange" />
  </div>
</template>

<script lang="ts" setup>
import { ref, defineProps, defineEmits } from 'vue'
import type { ComponentSize } from 'element-plus'
/**
 * @param pageSize     分页大小
 * @param currentPage   选中项
 * @param total        总数
 * @param pageSizes    分页大小list

 */
const props = defineProps({
  pageSize: {
    type: Number,
    default: 15
  },
  currentPage: {
    type: Number,
    default: 1
  },
  total: {
    type: Number,
    default: 0
  },
  pageSizes: {
    type: Array,
    default: () => [
      10, 15, 20, 25, 30
    ]
  },
  isHide: {
    type: Boolean,
    default: false
  }
})
const emits = defineEmits(['onCurrentChange', 'update:pageSize', 'update:currentPage', 'onChange'])
let internalPageSize = computed({
  get() {
    return props.pageSize
  },
  set(val) {
    // console.log(777, val)
    emits("update:pageSize", val)
  }
})
let internalCurrentPage = computed({
  get() {
    return props.currentPage
  },
  set(val) {
    console.log(777, val)
    emits("update:currentPage", val)
  }
})
const size = ref<ComponentSize>('default')
const background = ref(true)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(123, val);
  emits('onCurrentChange')
}
const onChange = () => {
  emits('onChange')
}
</script>

<style scoped>
.demo-pagination-block+.demo-pagination-block {
  margin-top: 10px;
}

.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}

.pb-page {
  display: flex;
  justify-content: flex-end;
  padding-top: 16px;
  box-shadow: inset 0px 1px 0px 0px rgba(0, 0, 0, 0.1);
}

::v-deep .el-pagination.is-background .btn-prev,
::v-deep .el-pagination.is-background .btn-next,
::v-deep .el-pagination.is-background li {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
}
</style>
